<html>
<head>
<meta charset="UTF-8" />
<title>AAChartKit 2.0</title>

<style type="text/css">
body {
  font-family: Helvetica, arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; }

body > *:first-child {
  margin-top: 0 !important; }
body > *:last-child {
  margin-bottom: 0 !important; }

a {
  color: #4183C4; }
a.absent {
  color: #cc0000; }
a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url() no-repeat 10px center;
  text-decoration: none; }

h1 tt, h1 code {
  font-size: inherit; }

h2 tt, h2 code {
  font-size: inherit; }

h3 tt, h3 code {
  font-size: inherit; }

h4 tt, h4 code {
  font-size: inherit; }

h5 tt, h5 code {
  font-size: inherit; }

h6 tt, h6 code {
  font-size: inherit; }

h1 {
  font-size: 28px;
  color: black; }

h2 {
  font-size: 24px;
  border-bottom: 1px solid #cccccc;
  color: black; }

h3 {
  font-size: 18px; }

h4 {
  font-size: 16px; }

h5 {
  font-size: 14px; }

h6 {
  color: #777777;
  font-size: 14px; }

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 15px 0; }

hr {
  background: transparent url() repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0;
}

body > h2:first-child {
  margin-top: 0;
  padding-top: 0; }
body > h1:first-child {
  margin-top: 0;
  padding-top: 0; }
  body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
  margin-top: 0;
  padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0; }

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  margin-top: 0; }

li p.first {
  display: inline-block; }
li {
  margin: 0; }
ul, ol {
  padding-left: 30px; }

ul :first-child, ol :first-child {
  margin-top: 0; }

dl {
  padding: 0; }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px; }
    dl dt:first-child {
      padding: 0; }
    dl dt > :first-child {
      margin-top: 0; }
    dl dt > :last-child {
      margin-bottom: 0; }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px; }
    dl dd > :first-child {
      margin-top: 0; }
    dl dd > :last-child {
      margin-bottom: 0; }

blockquote {
  border-left: 4px solid #dddddd;
  padding: 0 15px;
  color: #777777; }
  blockquote > :first-child {
    margin-top: 0; }
  blockquote > :last-child {
    margin-bottom: 0; }

table {
  padding: 0;border-collapse: collapse; }
  table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }

img {
  max-width: 100%; }

span.frame {
  display: block;
  overflow: hidden; }
  span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto; }
  span.frame span img {
    display: block;
    float: left; }
  span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0; }
span.align-center {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center; }
  span.align-center span img {
    margin: 0 auto;
    text-align: center; }
span.align-right {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right; }
  span.align-right span img {
    margin: 0;
    text-align: right; }
span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left; }
  span.float-left span {
    margin: 13px 0 0; }
span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right; }
  span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right; }

code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px; }

pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent; }

.highlight pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }

pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }
  pre code, pre tt {
    background-color: transparent;
    border: none; }

sup {
    font-size: 0.83em;
    vertical-align: super;
    line-height: 0;
}
* {
   -webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
    body {
        width: 854px;
        margin:0 auto;
    }
}
@media print {
   table, pre {
      page-break-inside: avoid;
   }
   pre {
      word-wrap: break-word;
   }
}
</style>
<!--Darkula风格-->
<!--<link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/darkula.min.css" rel="stylesheet">-->
<!--Docco风格-->
<link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/docco.min.css" rel="stylesheet">
<!--Monokai风格-->
<!--<link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/monokai.min.css" rel="stylesheet">-->
<!--Pojoaque风格-->
<!-- <link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/pojoaque.min.css" rel="stylesheet">-->
<!--GitHub 风格-->
<!-- <link href="https://apps.bdimg.com/libs/highlight.js/9.1.0/styles/github.min.css" rel="stylesheet">-->
<script src="http://apps.bdimg.com/libs/highlight.js/9.1.0/highlight.min.js"></script>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/funnel.js"></script>


</head>
<body>
<h1 id="toc_0">AAChartKit 2.0</h1>

<h6 id="toc_1">AAChartKit项目,是在流行的开源前端图表库<em>Highcharts</em>的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.</h6>

<ol>
<li>适配 <code>iOS 7</code>,  支持<code>ARC</code>,支持 <code>OC</code>语言,配置简单.</li>
<li>功能强大,支持<code>柱状图</code>  <code>条形图</code>  <code>折线图</code>  <code>填充图</code> <code>雷达图</code> <code>扇形图</code> <code>气泡图</code>等多种图形</li>
<li><code>动画</code>效果细腻精致,流畅优美.</li>
<li>支持类 <em>Masonry</em> <code>链式编程语法</code></li>
<li><code>AAChartView +AAChartModel = Chart</code>,在 AAChartKit 封装库当中,遵循这样一个极简主义公式:<code>图表视图控件+图表模型=你想要的图表</code>.</li>
</ol>

<h3 id="toc_2"><em>亲爱的,如果您使用时,觉得满意,请赏一颗星星✨,您的鼓励将是我继续努力的一大动力</em>.</h3>

<h2 id="toc_3">使用方法</h2>

<h3 id="toc_4">准备工作</h3>

<ol>
<li>将项目demo中的文件夹<code>AAChartKitFiles</code>拖入到所需项目中.</li>
<li>在你的项目的 <code>.pch</code> 全局宏定义文件中添加
</ol>
<div><pre><code class="language-objectivec">#import &quot;AAGlobalMacro.h&quot;</code></pre></div>


<h3 id="toc_5">正式开始</h3>

<ol>
<li>在你的视图控制器文件中添加</li>
</ol>

<div><pre><code class="language-objectivec">#import &quot;AAChartView.h&quot;</code></pre></div>

<p>2.创建视图AAChartView</p>

<div><pre><code class="language-objectivec">AAChartView *chartView = [[AAChartView alloc]init];
self.view.backgroundColor = [UIColor whiteColor];
chartView.frame = CGRectMake(0, 60, self.view.frame.size.width, self.view.frame.size.height-220);
chartView.contentHeight =self.view.frame.size.height-220;//设置图表视图的内容高度(默认 contentHeight 和 AAChartView 的高度相同)
[self.view addSubview:chartView];</code></pre></div>
 

<p>3.配置视图模型AAChartModel</p>

<div><pre><code class="language-objectivec">AAChartModel *chartModel= AAObject(AAChartModel)
.chartTypeSet(AAChartTypeColumn)//设置图表的类型(这里以设置的为柱状图为例)
.titleSet(@&quot;编程语言热度&quot;)//设置图表标题
.subtitleSet(@&quot;虚拟数据&quot;)//设置图表副标题
.categoriesSet(@[@&quot;Java&quot;,@&quot;Swift&quot;,@&quot;Python&quot;,@&quot;Ruby&quot;, @&quot;PHP&quot;,@&quot;Go&quot;,@&quot;C&quot;,@&quot;C#&quot;,@&quot;C++&quot;])//设置图表横轴的内容
.yAxisTitleSet(@&quot;摄氏度&quot;)//设置图表 y 轴的单位
.seriesSet(@[
AAObject(AASeriesElement)
.nameSet(@&quot;2017&quot;)
.dataSet(@[@45,@56,@34,@43,@65,@56,@47,@28,@49]),

AAObject(AASeriesElement)
.nameSet(@&quot;2018&quot;)
.dataSet(@[@11,@12,@13,@14,@15,@16,@17,@18,@19]),

AAObject(AASeriesElement)
.nameSet(@&quot;2019&quot;)
.dataSet(@[@31,@22,@33,@54,@35,@36,@27,@38,@39]),

AAObject(AASeriesElement)
.nameSet(@&quot;2020&quot;)
.dataSet(@[@21,@22,@53,@24,@65,@26,@37,@28,@49]),
])
;</code></pre></div>

<p>4.绘制图形</p>

<div><pre><code class="language-objectivec">[chartView aa_drawChartWithChartModel:chartModel];//图表视图对象调用图表模型对象,绘制最终图形</code></pre></div>

<p>5.刷新图形</p>

<div><pre><code class="language-objectivec"> [chartView aa_refreshChartWithChartModel:chartModel];//更新 AAChartModel 数据之后,刷新图表</code></pre></div>

<p>6.特别说明</p>

<p>AAChartKit 中扇形图、气泡图都归属为特殊类型,所以想要绘制扇形图、气泡图,图表模型 AAChartModel 设置稍有不同,示例如下</p>

<ul>
<li>绘制扇形图,你需要这样配置模型 AAChartModel</li>
</ul>

<div><pre><code class="language-objectivec">AAChartModel *chartModel= AAObject(AAChartModel)
        .chartTypeSet(AAChartTypePie)
        .titleSet(@&quot;编程语言热度&quot;)
        .subtitleSet(@&quot;虚拟数据&quot;)
        .dataLabelEnabledSet(true)//是否直接显示扇形图数据
        .yAxisTitleSet(@&quot;摄氏度&quot;)
        .seriesSet(
                   @[AAObject(AASeriesElement)
                     .nameSet(@&quot;语言热度占比&quot;)
                     .dataSet(@[
                                @[@&quot;Java&quot;  , @67],
                                @[@&quot;Swift&quot; , @44],
                                @[@&quot;Python&quot;, @83],
                                @[@&quot;OC&quot;    , @11],
                                @[@&quot;Ruby&quot;  , @42],
                                @[@&quot;PHP&quot;   , @31],
                                @[@&quot;Go&quot;    , @63],
                                @[@&quot;C&quot;     , @24],
                                @[@&quot;C#&quot;    , @888],
                                @[@&quot;C++&quot;   , @66],
                                ]),
                     ]
                   
                   )
        ;</code></pre></div>

<ul>
<li>绘制气泡图,你需要这样配置模型 AAChartModel</li>
</ul>

<div><pre><code class="language-objectivec">

AAChartModel *chartModel= AAObject(AAChartModel)
        .chartTypeSet(AAChartTypeBubble)
        .titleSet(@&quot;编程语言热度&quot;)
        .subtitleSet(@&quot;虚拟数据&quot;)
        .yAxisTitleSet(@&quot;摄氏度&quot;)
        .seriesSet(
                   @[
                     AAObject(AASeriesElement)
                     .nameSet(@&quot;2017&quot;)
                     .dataSet(
                              @[
                                @[@97, @36, @79],
                                @[@94, @74, @60],
                                @[@68, @76, @58],
                                @[@64, @87, @56],
                                @[@68, @27, @73],
                                @[@74, @99, @42],
                                @[@7,  @93, @87],
                                @[@51, @69, @40],
                                @[@38, @23, @33],
                                @[@57, @86, @31]
                                ]),
                     
                     AAObject(AASeriesElement)
                     .nameSet(@&quot;2018&quot;)
                     .dataSet(
                              @[
                                @[@25, @10, @87],
                                @[@2, @75, @59],
                                @[@11, @54, @8],
                                @[@86, @55, @93],
                                @[@5, @3, @58],
                                @[@90, @63, @44],
                                @[@91, @33, @17],
                                @[@97, @3, @56],
                                @[@15, @67, @48],
                                @[@54, @25, @81]
                                ]),
                     
                     AAObject(AASeriesElement)
                     .nameSet(@&quot;2019&quot;)
                     .dataSet(
                              @[
                                @[@47, @47, @21],
                                @[@20, @12, @4],
                                @[@6, @76, @91],
                                @[@38, @30, @60],
                                @[@57, @98, @64],
                                @[@61, @17, @80],
                                @[@83, @60, @13],
                                @[@67, @78, @75],
                                @[@64, @12, @10],
                                @[@30, @77, @82]
                                ]),
                     
                     ]
                   )
        ;</code></pre></div>

<p>7.当前已支持的图表类型有十种以上,说明如下</p>

<div><pre><code class="language-objectivec">typedef NSString *AAChartType;
static AAChartType const AAChartTypeColumn      = @&quot;column&quot;;     //柱形图
static AAChartType const AAChartTypeBar         = @&quot;bar&quot;;        //条形图
static AAChartType const AAChartTypeArea        = @&quot;area&quot;;       //折线区域填充图
static AAChartType const AAChartTypeAreaspline  = @&quot;areaspline&quot;; //曲线区域填充图
static AAChartType const AAChartTypeLine        = @&quot;line&quot;;       //折线图
static AAChartType const AAChartTypeSpline      = @&quot;spline&quot;;     //曲线图
static AAChartType const AAChartTypeScatter     = @&quot;scatter&quot;;    //散点图
static AAChartType const AAChartTypePie         = @&quot;pie&quot;;        //扇形图
static AAChartType const AAChartTypeBubble      = @&quot;bubble&quot;;     //气泡图
static AAChartType const AAChartTypePyramid     = @&quot;pyramid&quot;;    //金字塔图
static AAChartType const AAChartTypeFunnel      = @&quot;funnel&quot;;     //漏斗图</code></pre></div>

<h3 id="toc_6">AAChartModel一些重要属性经过配置之后的图形示例如下</h3>

<ul>
<li> 条形图
<div id="container" style="width: 880px; height: 400px; margin: 0 auto"></div></li>
<li><p> 折线区域填充图
<div id="container2" style="width: 880px; height: 400px; margin: 0 auto"></div>
</p></li>
<li><p>y 折线图
<div id="container3" style="width: 880px; height: 400px; margin: 0 auto"></div>
</p></li>
<li><p>x 雷达图
<div id="container4" style="width: 880px; height: 400px; margin: 0 auto"></div></p></li>
<li><p> 散点图
<div id="container5" style="width: 880px; height: 400px; margin: 0 auto"></div>
</p></li>
<li><p> 金字塔图
<div id="container6" style="width: 880px; height: 400px; margin: 0 auto"></div></p></li>
 
 
 </p>



<h3 id="toc_7">AAChartModel 属性配置列表</h3>

<div><pre><code class="language-objectivec">AAPropStatementAndPropSetFuncStatement(copy, AAChartModel, NSString *, title);//标题内容
AAPropStatementAndPropSetFuncStatement(copy, AAChartModel, NSString *, subtitle);//副标题内容
AAPropStatementAndPropSetFuncStatement(copy, AAChartModel, AAChartSubtitleAlignType, subtitleAlign);//图表副标题文本水平对齐方式。可选的值有 “left”，”center“和“right”。 默认是：center.
AAPropStatementAndPropSetFuncStatement(copy, AAChartModel, AAChartType, chartType);//图表类型
AAPropStatementAndPropSetFuncStatement(copy, AAChartModel, AAChartStackingType, stacking);//堆积样式
AAPropStatementAndPropSetFuncStatement(copy, AAChartModel, AAChartSymbolType, symbol);//折线曲线连接点的类型：&quot;circle&quot;, &quot;square&quot;, &quot;diamond&quot;, &quot;triangle&quot;,&quot;triangle-down&quot;，默认是&quot;circle&quot;
AAPropStatementAndPropSetFuncStatement(copy, AAChartModel, AAChartZoomType, zoomType);//缩放类型 AAChartZoomTypeX表示可沿着 x 轴进行手势缩放
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, pointHollow);//折线曲线的连接点是否为空心的
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, inverted);//x 轴是否垂直
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, xAxisReversed);// x 轴翻转
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, yAxisReversed);//y 轴翻转
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, crosshairs);//是否显示准星线(默认显示)
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, gradientColorEnable);//是否要为渐变色
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, polar);//是否极化图形(变为雷达图)
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, dataLabelEnabled);//是否显示数据
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, xAxisLabelsEnabled);//x轴是否显示数据
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSArray *, categories);//图表横坐标每个点对应的名称
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSNumber *, xAxisGridLineWidth);//x轴网格线的宽度
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, yAxisLabelsEnabled);//y轴是否显示数据
AAPropStatementAndPropSetFuncStatement(copy,   AAChartModel, NSString *, yAxisTitle);//y轴标题
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSNumber *, yAxisGridLineWidth);//y轴网格线的宽度
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSArray *, colorsTheme);//图表主题颜色数组
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSArray *, series);
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, legendEnabled);//是否显示图例
AAPropStatementAndPropSetFuncStatement(copy,   AAChartModel ,AAChartLegendLayoutType, legendLayout);//图例数据项的布局。布局类型： &quot;horizontal&quot; 或 &quot;vertical&quot; 即水平布局和垂直布局 默认是：horizontal.
AAPropStatementAndPropSetFuncStatement(copy,   AAChartModel ,AAChartLegendAlignType, legendAlign);//设定图例在图表区中的水平对齐方式，合法值有left，center 和 right。
AAPropStatementAndPropSetFuncStatement(copy,   AAChartModel ,AAChartLegendVerticalAlignType, legendVerticalAlign);//设定图例在图表区中的垂直对齐方式，合法值有 top，middle 和 bottom。垂直位置可以通过 y 选项做进一步设定。
AAPropStatementAndPropSetFuncStatement(copy,   AAChartModel, NSString *, backgroundColor);//图表背景色
AAPropStatementAndPropSetFuncStatement(assign, AAChartModel, BOOL, options3dEnable);//是否3D化图形(仅对条形图,柱状图有效)
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSNumber *, options3dAlpha);
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSNumber *, options3dBeta);
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSNumber *, options3dDepth);//3D图形深度
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSNumber *, borderRadius);//柱状图长条图头部圆角半径(可用于设置头部的形状,仅对条形图,柱状图有效)
AAPropStatementAndPropSetFuncStatement(strong, AAChartModel, NSNumber *, markerRadius);//折线连接点的半径长度</code></pre></div></li>
</ul>

<script language="JavaScript">
$(document).ready(function() {
    var AAChartModel = {
        title :'编程语言热度',
        subtitle : '虚拟数据',
        subtitleAlign : 'left',
        chartType :'column',
        stacking : 'percent',
        symbol :  'diamond',
        zoomType : 'x',
        pointHollow : true,
        inverted : false,
        backgroundColor : '#ffffff',
        options3dEnbale:true,
        xAxisReversed : false,
        yAxisReversed : false,
        crosshairs : true,
        gradientColorEnable : false,
        polar : false,
        dataLabelEnabled : true,
        xAxisLabelsEnabled : true,
        categories : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        xAxisGridLineWidth : 1,
        yAxisLabelsEnabeld : true,
        yAxisTitle : '摄氏度',
        yAxisGridLineWidth : 1,
        colorsTheme : ["#b5282a","#e7a701","#50c18d","#fd4800","#f1c6c5"],
        legendEnabled : true,
    };
    
    var AAOptions = getAAOptionsWithAAChartModel(AAChartModel);

for (var i = 0; i <6; i++) {
                  
                    if (i==0) {
                        AAOptions.chart.type= "bar";
                        $('#container').highcharts(AAOptions);
                    } else if(i==1) {
                        AAOptions.chart.type = "area";
                        $('#container2').highcharts(AAOptions);
                    }else if(i==2) {
                        AAOptions.chart.type = "line";
                        $('#container3').highcharts(AAOptions);
                    }else if (i==3){
                        AAOptions.chart.type = "area";
                        AAOptions.chart.polar = true;
                        $('#container4').highcharts(AAOptions);
                    }else if (i==4){
                        AAOptions.chart.type = "scatter";
                        AAOptions.chart.polar = false;

                        <!--                              AAOptions.series.radius =4;-->
                        $('#container5').highcharts(AAOptions);
                    }else if(i==5){
                        AAOptions.chart.type ="pyramid";
                                           AAOptions.series = [
                                                   {
                                                   "name" : "2015",
                                                   "data" : [
                                                             201,
                                                             237,
                                                             367,
                                                             159,
                                                             337,
                                                              ],
                                                   "borderRadius" : 1000
                                                   },];
                 
                                                   $('#container6').highcharts(AAOptions);
                    }

}
  
    
    // $('#container').highcharts(AAOptions);
    //    $('#container2').highcharts(AAOptions);
    //       $('#container3').highcharts(AAOptions);
    //          $('#container4').highcharts(AAOptions);
    //             $('#container5').highcharts(AAOptions);
    //                $('#container6').highcharts(AAOptions);
});

hljs.initHighlightingOnLoad();


function  getAAOptionsWithAAChartModel(AAChartModel){
    var AAChart ={
      type: AAChartModel.chartType,
      inverted: AAChartModel.inverted,
      backgroundColor: AAChartModel.backgroundColor,
      animation: true,
      zoomType: AAChartModel.zoomType,
      panning: true,
      polar: AAChartModel.polar,
      options3d: {
         enabled: AAChartModel.options3dEnbale,

      }



    }
    
    
    
    var AATitle = {
    text: AAChartModel.title,
    };
    var AASubtitle = {
    text: AAChartModel.subtitle,
    };
    var AAXAxis = {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    };
    var AAYAxis = {
    title: {
    text: 'Temperature (\xB0C)'
    },
    plotLines: [{
    value: 0,
    width: 1,
    color: '#808080'
    }]
    };
    
    var AATooltip = {
    valueSuffix: '\xB0C',
    shared:true,
    crosshairs:true,
    }
    
    var AALegend = {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle',
    borderWidth: 0
    };
    
    var AASeries =  [
                   {
                   name: 'Tokyo',
                   data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                          26.5, 23.3, 18.3, 13.9, 9.6]
                   },
                   {
                   name: 'New York',
                   data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
                          24.1, 20.1, 14.1, 8.6, 2.5]
                   },
                   {
                   name: 'London',
                   data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
                          16.6, 14.2, 10.3, 6.6, 4.8]
                   }
                   ];
    
    var AAOptions = {};
    AAOptions.chart = AAChart,
    AAOptions.title = AATitle;
    AAOptions.subtitle = AASubtitle;
    AAOptions.xAxis = AAXAxis;
    AAOptions.yAxis = AAYAxis;
    AAOptions.tooltip = AATooltip;
    AAOptions.legend = AALegend;
    AAOptions.series = AASeries;
    AAOptions.colorsTheme = AAChartModel.colorsTheme;

return AAOptions;
}
</script>
 </body>
</html>


